<template>
	<view class="create">
		<view class="formsBox">
			<uni-forms ref="form" :modelValue="formData" :label-width="100" :rules="rules">
				<uni-forms-item label="请假申请人" name="applicant">
					<uni-easyinput type="text" v-model="formData.applicant" placeholder="请输入姓名" disabled />
				</uni-forms-item>
				<uni-forms-item label="工作代理人" name="agent">
					<bindingPersonnel v-model="formData.agent"></bindingPersonnel>
				</uni-forms-item>
				<uni-forms-item label="请假开始时间" name="startTime">
					<uni-datetime-picker :disabled="!!processId" type="datetime" v-model="formData.startTime" return-type="timestamp" placeholder="请选择请假开始时间" />
				</uni-forms-item>
				<uni-forms-item label="请假结束时间" name="endTime">
					<uni-datetime-picker :disabled="!!processId" type="datetime" v-model="formData.endTime" return-type="timestamp" placeholder="请选择请假结束时间" />
				</uni-forms-item>
				<uni-forms-item label="请假类型" name="type">
					<uni-data-select
						:disabled="!!processId"
					    v-model="formData.type"
					    :localdata="oaLeaveType"
						placeholder="请选择请假类型"
						@change="oaLeaveChange"
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="请假天数" name="dayNum">
					<uni-easyinput :disabled="!!processId" type="number" v-model="formData.dayNum"  placeholder="请输入请假天数" @input="dayNumInput" />
				</uni-forms-item>
				<uni-forms-item label="剩余可用请假天数">
					<input class="input" v-if="remaining >= 0" v-model="remaining" type="number" disabled />
					<text v-else>无限制</text>
				</uni-forms-item>
				<uni-forms-item label="请假理由" name="reason">
					<uni-easyinput :disabled="!!processId" type="textarea" autoHeight v-model="formData.reason" placeholder="请输入请假理由"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="请假相关文件上传" name="files">
					<uploadFile v-model="formData.files" :disabled="!!processId" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="buttonBox" v-if="!processId">
			<button class="button" @click="submit" type="primary">提交</button>
		</view>
	</view>
</template>

<script>
	import bindingPersonnel from '@/components/user/bindingPersonnel.vue'
	import uploadFile from '@/components/common/uploadFile.vue'
	import {getIntDictOptions} from '@/utils/auth.js'
	import {createLeave} from '@/api/oa/leave/index.js'
	import {useVacation} from '@/api/user/userApi.js'
	export default {
		components:{
			bindingPersonnel,
			uploadFile
		},
		props:{
			processId:'',
			propFromData:{},
			remainingNum:0,
		},
		watch:{
			propFromData(val){
				this.formData = val;
			},
			remainingNum(val){
				this.remaining = val;
			}
		},
		data() {
			return {
				formData:{
					applicant:this.$store.state.user.name,
					agent:'',
					startTime:'',
					dayNum:'',
					type:'',
					startTime:'',
					endTime:'',
					reason:'',
					files:[]
				},
				oaLeaveType: [],
				remaining:0,
				rules: {
					applicant: {
						rules: [{
							required: true,
							errorMessage: '请输入请假申请人',
						}]
					},
					agent:{
						rules: [{
							required: true,
							errorMessage: '请选择工作代理人',
						}]
					},
					startTime: {
						rules: [{
							required: true,
							errorMessage: '请选择请假开始时间',
						}]
					},
					endTime: {
						rules: [{
							required: true,
							errorMessage: '请选择请假结束时间',
						}]
					},
					type: {
						rules: [{
							required: true,
							errorMessage: '请选择请假类型',
						}]
					},
					dayNum: {
						rules: [{
							required: true,
							errorMessage: '请输入请假天数',
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '请输入请假理由',
						}]
					},
				},
				items: [{
				  text: "一年级",
				  value: "1-0",
				  children: [
					
				  ]
				},
				{
				  text: "二年级",
				  value: "2-0"
				},
				{
				  text: "三年级",
				  value: "3-0"
				}]
			};
		},
		methods:{
			// 点击提交
			submit(){
				uni.showLoading()
				this.$refs.form.validate().then(async res => {
					try{
						let info = await createLeave(this.formData);
						console.log(info)
						uni.hideLoading()
						uni.showToast({
							title:'发起成功',
							icon:'none',
							success: () => {
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/process/leave/index'
									})
								},1500)
							}
						})
					}catch(err){
						console.log(err)
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log('表单错误信息：', err);
				})
			},
			// 请假类型选择的
			async oaLeaveChange(val){
				if(!val){
					return false
				}
				console.log(val);
				let remaining = await useVacation({
					leaveType: val,
					userId:this.$store.state.user.oaUser.systemUserId,
				});
				remaining = remaining.data;
				this.remaining = remaining;
				if (remaining >= 0) {
				    if (Number(this.formData.dayNum) > Number(remaining)) {
				      this.formData.dayNum = remaining
				    }
				}
			},
			dayNumInput(val){
				if (this.remaining >= 0) {
				    if (Number(val) > Number(this.remaining)) {
						setTimeout(()=>{
							this.formData.dayNum = this.remaining
							this.$set(this.formData,'dayNum',this.remaining)
						})
				    }
				}
			},
			// 
			select(res){
				console.log(res);
			},
			progress(res){
				console.log(res);
			},
			success(res){
				console.log(res);
			},
			fail(res){
				console.log(res);
			},
		},
		async onLoad() {
			this.oaLeaveType = await getIntDictOptions('oa_leave');
			console.log(this.oaLeaveType)
		},
		async mounted() {
			this.oaLeaveType = await getIntDictOptions('oa_leave');
			console.log(this.oaLeaveType)
		}
	}
</script>

<style lang="less" scoped>
.create{
	width: 100%;
	height: auto;
	padding-top: 20rpx;
	.formsBox{
		width: 100%;
		height: auto;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		.uni-forms-item{
			margin-bottom: 30rpx;
		}
	}
	.buttonBox{
		width: 100%;
		height: auto;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
	}
}
</style>
